<template>
  <div class='edit-account-dialog-container'
       v-if="visible">
    <el-dialog :visible.sync="visible"
               @close="dialogClose"
               :close-on-click-modal="false"
               :title="dialogStatus==='edit'?'编辑账号':'新增账号'">
      <el-form :model="editAccountData"
               class="edit-account-form"
               status-icon
               ref="accountForm"
               :rules="rules"
               label-width="100px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="单位类型"
                          prop="company_type">
              <el-select v-model="editAccountData.company_type">
                <el-option label="选择单位类型"
                           value="0">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
            <el-form-item label="所属公司"
                          prop="account_company">
              <el-select v-model="editAccountData.account_company">
                <el-option label="选择所属公司"
                           value="0">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="权限模板"
                          prop="permission_template">
              <el-select v-model="editAccountData.permission_template">
                <el-option label="选择权限模板"
                           value="0">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
            <el-form-item label="用户名"
                          prop="user_name">
              <el-input v-model="editAccountData.user_name"
                        placeholder="请输入用户名">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="用户昵称"
                          prop="user_nickname">
              <el-input v-model="editAccountData.user_nickname"
                        placeholder="请输入用户昵称">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
            <el-form-item label="真实姓名"
                          prop="real_name">
              <el-input v-model="editAccountData.real_name"
                        placeholder="请输入真实姓名">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="岗位"
                          prop="job_name">
              <el-input v-model="editAccountData.job_name"
                        placeholder="请输入岗位">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
            <el-form-item label="用户类型"
                          prop="user_type">
              <el-select v-model="editAccountData.user_type">
                <el-option label="选择用户类型"
                           value="0">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="手机号"
                          prop="phone">
              <el-input v-model="editAccountData.phone"
                        placeholder="请输入手机号">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   icon="el-icon-document"
                   @click="saveData">保 存</el-button>
        <el-button @click="cancelData">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data () {
    var checkUserName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        callback();
      }
    };
    var checkNickName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户昵称'));
      } else {
        callback();
      }
    };
    var checkRealName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入真实姓名'));
      } else {
        callback();
      }
    };
    var checkJobType = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入岗位'));
      } else {
        callback();
      }
    };
    var checkPhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'));
      } else {
        callback();
      }
    };
    return {
      visible: false,
      editAccountData: {},
      rules: {
        user_name: [
          { validator: checkUserName, trigger: 'blur' }
        ],
        user_nickname: [
          { validator: checkNickName, trigger: 'blur' }
        ],
        real_name: [
          { validator: checkRealName, trigger: 'blur' }
        ],
        job_name: [
          { validator: checkJobType, trigger: 'blur' }
        ],
        phone: [
          { validator: checkPhone, trigger: 'blur' }
        ],
      }
    }
  },
  props: {
    dialogVisible: Boolean,
    dialogStatus: String,
    dialogForm: Object
  },
  methods: {
    dialogClose () {
      this.$emit('update:dialogVisible', false)
    },
    //保存按钮
    saveData () {
      this.dialogClose()
    },
    //取消按钮
    cancelData () {
      this.dialogClose()
    }
  },
  watch: {
    dialogVisible (newval, oldval) {
      this.visible = newval
    },
    dialogForm (newval, oldval) {
      this.editAccountData = newval
    }
  },
  created () {
    this.editAccountData = this.dialogForm
    this.visible = this.dialogVisible
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.edit-account-dialog-container {
  .dialog-footer {
    text-align: center;
  }
  .edit-account-form {
    .el-select {
      width: 100%;
    }
  }
}
</style>
